<template>
  <view class="search-page">
    <!-- 搜索栏 -->
    <view class="search-bar">
      <view class="search-input-wrapper">
        <u-icon name="search" size="18" color="#9ca3af" />
        <input 
          class="search-input" 
          v-model="keyword" 
          placeholder="搜索服务或需求"
          confirm-type="search"
          @confirm="handleSearch"
        />
        <u-icon 
          v-if="keyword" 
          name="close-circle-fill" 
          size="16" 
          color="#9ca3af" 
          @click="handleClear"
        />
      </view>
      <text class="cancel-btn" @click="handleCancel">取消</text>
    </view>

    <!-- 搜索历史 -->
    <view class="history-section" v-if="!keyword && searchHistory.length > 0">
      <view class="section-header">
        <text class="section-title">搜索历史</text>
        <u-icon name="trash" size="16" color="#9ca3af" @click="handleClearHistory" />
      </view>
      <view class="history-tags">
        <view 
          v-for="(item, index) in searchHistory" 
          :key="index"
          class="history-tag"
          @click="handleHistoryClick(item)"
        >
          {{ item }}
        </view>
      </view>
    </view>

    <!-- 热门搜索 -->
    <view class="hot-section" v-if="!keyword">
      <text class="section-title">热门搜索</text>
      <view class="hot-tags">
        <view 
          v-for="(item, index) in hotSearches" 
          :key="index"
          class="hot-tag"
          @click="handleHotClick(item)"
        >
          {{ item }}
        </view>
      </view>
    </view>

    <!-- 搜索结果 -->
    <scroll-view class="results-scroll" scroll-y v-if="keyword && searchResults.length > 0">
      <view class="results-container">
        <ServiceCard 
          v-for="item in searchResults" 
          :key="item.id"
          :data="item"
          @click="handleResultClick"
        />
      </view>
    </scroll-view>

    <!-- 空状态 -->
    <view class="empty-state" v-if="keyword && searchResults.length === 0">
      <u-icon name="search" size="80" color="#d1d5db" />
      <text class="empty-text">暂无搜索结果</text>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'
import ServiceCard from '@/components/yjyny/ServiceCard.vue'

const keyword = ref('')
const searchHistory = ref(['农机服务', '办公场地', '金融贷款'])
const hotSearches = ref(['农机租赁', '土地流转', '农产品销售', '技术培训', '物流配送'])
const searchResults = ref([])

const handleSearch = () => {
  if (!keyword.value.trim()) return
  
  // 添加到搜索历史
  if (!searchHistory.value.includes(keyword.value)) {
    searchHistory.value.unshift(keyword.value)
    if (searchHistory.value.length > 10) {
      searchHistory.value.pop()
    }
  }
  
  // TODO: 调用API搜索
  uni.showToast({ title: '搜索功能开发中', icon: 'none' })
}

const handleClear = () => {
  keyword.value = ''
  searchResults.value = []
}

const handleCancel = () => {
  uni.navigateBack()
}

const handleClearHistory = () => {
  uni.showModal({
    title: '清除历史',
    content: '确定清除搜索历史吗？',
    success: (res) => {
      if (res.confirm) {
        searchHistory.value = []
      }
    }
  })
}

const handleHistoryClick = (item) => {
  keyword.value = item
  handleSearch()
}

const handleHotClick = (item) => {
  keyword.value = item
  handleSearch()
}

const handleResultClick = (item) => {
  uni.navigateTo({
    url: `/pages/yjyny/service/detail?id=${item.id}`
  })
}
</script>

<style scoped lang="scss">
.search-page {
  min-height: 100vh;
  background-color: #f9fafb;
}

.search-bar {
  display: flex;
  align-items: center;
  gap: 16rpx;
  padding: 24rpx 32rpx;
  background-color: #ffffff;
  border-bottom: 2rpx solid #f3f4f6;
}

.search-input-wrapper {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 16rpx;
  padding: 16rpx 24rpx;
  background-color: #f9fafb;
  border-radius: 48rpx;
}

.search-input {
  flex: 1;
  font-size: 28rpx;
  color: var(--text-primary);
}

.cancel-btn {
  font-size: 28rpx;
  color: var(--text-primary);
}

.history-section,
.hot-section {
  padding: 32rpx;
}

.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24rpx;
}

.section-title {
  font-size: 28rpx;
  font-weight: 500;
  color: var(--text-primary);
  margin-bottom: 24rpx;
}

.history-tags,
.hot-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 16rpx;
}

.history-tag,
.hot-tag {
  padding: 12rpx 24rpx;
  background-color: #ffffff;
  border-radius: 48rpx;
  font-size: 26rpx;
  color: var(--text-secondary);
}

.history-tag:active,
.hot-tag:active {
  background-color: rgba(16, 185, 129, 0.1);
  color: var(--color-primary);
}

.results-scroll {
  height: calc(100vh - 140rpx);
}

.results-container {
  padding: 24rpx 32rpx;
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 200rpx 0;
}

.empty-text {
  margin-top: 32rpx;
  font-size: 28rpx;
  color: var(--text-secondary);
}
</style>

